<template>
    <div id="product-list">
        <el-table
                class="style-a"
                :data="tableData"
                size="small"
                border
                v-loading.body="loadingPrdList" element-loading-text="Loading"
                style="width:100%">
            <el-table-column
                    label="产品ID"
                    align="center"
                    prop="id"
                    width="130">
            </el-table-column>
            <el-table-column
                    label="产品名称"
                    align="center"
                    prop="productName"
                    width="">
            </el-table-column>
            <el-table-column
                    label="库存"
                    prop="total"
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="门市价（元）"
                    prop="price"
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="添加时间"
                    align="center"
                    prop="createTime"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="状态"
                    align="center"
                    prop="statusValue"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center"
                    width="300">
                <template slot-scope="scope" class="handle">
                    <a href="javascript:void(0);" @click="checkProductDetail(scope.row.id)">查看</a>
                    <a href="javascript:void(0);" @click="placeOrder(scope.row.id, scope.row.productName, scope.row.price)">下单</a>
                </template>
            </el-table-column>
        </el-table>
        <!--下单-->
        <el-dialog
                title="下单"
                width="600px"
                @close="closeDialog('orderForm')"
                :visible.sync="orderDialogVisible">
            <el-form label-width="100px" :inline="false" :model="orderForm" ref="orderForm" :rules="orderFormRules" class="demo-form-inline" size="small">
                <el-form-item label="产品名称">
                    <template>
                        <div>{{orderForm.productName}}</div>
                    </template>
                </el-form-item>
                <el-form-item label="预定数量" prop="bookNum">
                    <el-input-number v-model="orderForm.bookNum" @change="handleChange" :min="1" label="描述文字"></el-input-number>
                </el-form-item>
                <el-form-item label="客人" prop="clientName">
                    <el-input v-model="orderForm.clientName" placeholdder=""></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="telPhone">
                    <el-input v-model="orderForm.telPhone" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="单价">
                    <template>
                        <div>{{orderForm.price}}元</div>
                    </template>
                </el-form-item>
                <el-form-item label="总价">
                    <template>
                        <div>{{amount}}元</div>
                    </template>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="validOrderForm('orderForm')" size="small">确 定</el-button>
                <el-button @click="orderDialogVisible = false" size="small">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { getDistributorProductList, generateOrder } from '@/api/dProductList'
	export default {
		computed: {
			...mapGetters([
				'name',
				'roles'
			]),
			amount: function() {
				if (!this.orderForm.bookNum) {
					return
				}
				let val = this.orderForm.bookNum
				let m = 0
				let s1 = this.orderForm.price.toString()
				let s2 = val.toString()
				try { m += s1.split('.')[1].length } catch (e) { console.log(e) }
				try { m += s2.split('.')[1].length } catch (e) { console.log(e) }
				return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m)
			}
		},
		data() {
			return {
				tableData: [],
				loadingPrdList: false,
				orderDialogVisible: false,
				orderForm: {
					distributorId: null,
					productName: '',
					bookNum: '',
					clientName: '',
					telPhone: '',
					price: null
				},
				orderFormRules: {
					distributorId: [{ required: true, message: '请选择代理商' }],
					bookNum: [{ required: true, message: '请输入购买数量' }],
					clientName: [{ required: true, message: '请输入客人姓名' },
                        { pattern: /^[\u4e00-\u9fa5a-zA-Z]{2,20}$/, message: '请输入正确的客人姓名', trigger: 'blur' }],
					telPhone: [{ required: true, message: '请输入手机号码' },
						{ pattern: /^\d{11}$/, message: '请输入11位手机号码', trigger: 'blur' }]
				}
			}
		},
		created() {
			this.getDistributorProductList()
		},
		methods: {
			getDistributorProductList() {
				this.loadingPrdList = true
				getDistributorProductList().then(res => {
					let data = res.data
					this.loadingPrdList = false
					if (data.errorCode === 'E_000') {
						data.body.forEach(item => {
							if (item.status) {
								item.statusValue = '正常'
							} else {
								item.statusValue = '下架'
							}
						})
						this.tableData = data.body
					}
				}).catch(() => {
					this.loadingPrdList = false
				})
			},
			checkProductDetail(id) {
				this.$router.push({ path: '/dProductManage/dProductDetail', query: { id: id }})
			},
			validOrderForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.generateOrder()
					} else {
						return false
					}
				})
			},
			generateOrder() {
				let orderForm = this.orderForm
				let params = {
					name: orderForm.clientName,
					num: orderForm.bookNum,
					phone: orderForm.telPhone,
					productId: this.productId,
					unitAmount: orderForm.price
				}
				generateOrder(params).then(res => {
					let data = res.data
					if (data.errorCode == 'E_000') {
						this.$message({
							type: 'success',
							message: data.message
						})
                        this.orderDialogVisible = false
						this.getDistributorProductList()
					}
				})
			},
			closeDialog(formName) {
				this.$refs[formName].resetFields()
			},
			placeOrder(id, prdName, price) {
				this.productId = id
				this.orderForm.productName = prdName
				this.orderForm.price = price
				this.orderDialogVisible = true
			},
			handleChange() {
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss">
    #product-list{

    }
</style>
